<template>
	<view class="usable">
		<xbd-pages-content title="title">
			<template #content>
				<view class="content">
					<uni-list :border="false">
						<xbd-meal-card v-for="item in showList" :key="item.id" :myInfo="item"  @clickmealCard="details(item.id)">
							</xbd-meal-card>
							<xbd-null-list v-if="!showList.length"></xbd-null-list>
							<xbd-loading-more :status-num="statusNum" :is-load-more="isLoadMore"></xbd-loading-more>
					</uni-list>

				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import { Meal } from '@/api/index.js';
	export default {
		data() {
			return {
				title:'',
				statusNum: 0,
				isLoadMore: false,
				total:0,
				showList: [],
				meal_type:''
			};
		},
		methods: {
			async getList() {
				try {
					this.$showLoading('加载中');
					const res = await Meal.getUsableList(this.meal_type);
					uni.hideLoading();
					if(res.success){
						this.showList = res.data
					}else{
						uni.showToast({
								title: res.msg,
								icon: 'none',
							})
					}
					console.log(res)
				} catch (e) {
					uni.hideLoading();
					console.log(e);
				}
			},
			details(id) {
				uni.navigateTo({
					url:  `../myApply/detailsQr?id=${id}&msg=${this.meal_type}`,
				})
			}
		},
		computed: {

		},
		onLoad(res) {
			this.meal_type =res.type
			this.getList()
			if(this.meal_type=== '0' ){
				this.title = '普通用餐餐券'
			}else if(this.meal_type === '1'){
				this.title = '自助用餐餐券'
			}else if(this.meal_type === '2'){
				this.title = '桌餐用餐餐券'
			}
			uni.setNavigationBarTitle({
			    title: this.title
			});
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list {
		background-color: #f8f8f8;
	}
</style>
